import React from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import api from '../../api/axios'
import styles from './login.module.css'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
function Login() {
  const Navigate = useNavigate()
  const onFinish = async (values) => {
    console.log(111)
    // 调取登录接口
    const res = await api.post('/api/login', {
      username: values.username,
      password: values.password
    })
    const { code, data } = res.data
    console.log(res)
    if (code == 200) {
      localStorage.setItem('token', data.token)
      localStorage.setItem('avatar',data.userInfo.avatar)
      localStorage.setItem('id',data.userInfo.id)
      localStorage.setItem('nickname',data.userInfo.nickname)
      Navigate('/')
    }
  }
  return (
    <div>
      <div>
        <NavBar onBack={() => Navigate(-1)}></NavBar>
        <div className={styles.box_css}>
          <span className={styles.lo_css}>登录您的12306账号</span>
        </div>
        <div>
          <span className={styles.wz_css}>
            友列高铁承诺保证您的账号及个人信息的安全，绝不提供 <br />任何第三方，绑定及视为同意免责与隐私申明》。
          </span>
        </div>
        <div className={styles.form_css}>
          <Form
            onFinish={onFinish}
            layout='horizontal'
            footer={
              <Button block type='submit' color='primary' size='large'>
                登录
              </Button>
            }
          >
            <Form.Item
              name='username'
              label='手机号'
              rules={[{ required: true, message: '账号密码不可以为空' }]}
            >
              <Input placeholder='请输入手机号' />
            </Form.Item>
            <Form.Item
              name='password'
              label='密码'
              rules={[{ required: true, message: '账号密码不可以为空' },
                //正则验证
                {
                  pattern:/^\w[0-9 a-z A-Z ]{11}/,message:'密码格式不正确'
                }
              ]}
            >
              <Input placeholder='请输入密码' />
            </Form.Item>
          </Form>
        </div>
      </div>
      <div className={styles.ss_css}>
        <span>使用飞常准预订免账号出票</span>
      </div>
    </div>
  )
}

export default Login
